<template>
	<view class="recommend-list">
		<block v-if="show">
			<!-- <view class="recommend-list-box">
				<view :style="!sortList.length?'margin-bottom: -40rpx':''">
					<pt-recommend-page-header :object="titleInfo"></pt-recommend-page-header>
				</view>
				<u-sticky h5-nav-height="0" bg-color="#FFF">
					<view>
						<view class="recommend-tabs" v-if="sortList.length">
							<u-tabs
								:list="sortList"
								:current="sortIndex"
								@change="sortTabChange"
								active-color="#141414"
								inactive-color="#666666"
								name="class_name"
								font-size="28">
							</u-tabs>
						</view>
						<pt-small-function
							@changeType="changeType"
							:Multiple="true"
							:spacePopList="space_list"
							:stylePopList="style_list"
							@clickItem="clickItem">
						</pt-small-function>
					</view>
				</u-sticky>
				<view class="recommend-item">
					<pt-product-items
						isWaterfall
						:showSort="false"
						:object="{goods_list: goods_list}"
						:isBig="isBig"
						:noMore="true"
						:orderBy="shelf_id==80?'number':''"
						@GoInfoAddFoot="GoInfoAddFoot"
						:isLogin="isLogin">
					</pt-product-items>
				</view>
			</view> -->
			<view class="shelf-bg">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-18/20220318/d035709b97f65a95c0cfd55c1d77ecf7.png"></image>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="goods_list.length && noMore"></pt-nomore>
			<pt-nothing 
				v-if="noMore && !goods_list.length" 
				:text="'暂无商品'" 
				bg-color="#FFF"
				:isHigh="true"
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
			</pt-nothing>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				 // 推荐类型id
				shelf_id: '',
				// 筛选条件
				order_by: 'sort',
				class_id: '',
				space_id: '',
				style_id: '',
				style_list: [],
				space_list: [],
				// 筛选条件
				sortIndex: 0,
				sortList: [],
				titleInfo: {
					url: '',
					title: '',
					des: ''
				},
				isBig: false,
				goods_list: [],
				page: 0,
				noMore: false,
				isLoading: false,
				// 足迹参数
				is_home_jump: false,
				is_shelf: false,
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				isLogin: false
			};
		},
		onLoad(options) {
			if(options.shelf_id){
				this.shelf_id = options.shelf_id
			}
			if(options.is_shelf){
				this.is_shelf = options.is_shelf
			}
			if(options.is_home_jump){
				this.is_home_jump = options.is_home_jump
			}
		},
		onShow() {
			if(uni.getStorageSync('userInfo')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
			this.init()
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
		},
		methods: {
			clickItem(e){
				this.order_by = e.sort
				this.space_id = e.space_id!=0?e.space_id:''
				this.style_id = e.style_id!=0?e.style_id:''
				this.noMore = false
				this.page = 0
				this.goods_list = []
				this.init()
			},
			init(){
				this.$u.api.ShelfItem({
					shelf_id: this.shelf_id,
					order_by: this.order_by, 
					asc: 2,
					class_id: this.class_id,
					space_id: this.space_id,
					style_id: this.style_id,
					page: this.page,
				}).then(res => {
					this.show = true
					if(!this.titleInfo.title || !this.style_list.length || !this.space_list || !this.sortList){
						this.titleInfo = {
							url: res.datas.img,
							title: res.datas.name,
							des: res.datas.brief
						}
						this.style_list = res.datas.style_list
						this.space_list = res.datas.space_list
						this.sortList = res.datas.class_list
						if(this.class_id){
							this.sortList.forEach((item,i) => {
								if(item.class_id==this.class_id){
									this.sortIndex = i
								}
							})
						}
						uni.setNavigationBarTitle({
							title: res.datas.name
						})
					}
					this.isLoading = false
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.goods_list.push(item)
						})
					}else{
						this.noMore = true
					}
				}).catch(res => {
					console.log(res)
				})
			},
			sortTabChange(e){
				if(e!=undefined){
					this.sortIndex = e
				}
				if(e>0){
					this.class_id = this.sortList[e].class_id
				}else{
					this.class_id = ''
				}
				this.goods_list = []
				this.page = 0
				this.noMore = false
				this.init()
			},
			changeType(e){
				if(e==1){
					this.isBig = true
				}else{
					this.isBig = false
				}
			},
			GoInfoAddFoot(){
				if(uni.getStorageSync('userInfo')){
					if(this.is_home_jump || this.is_shelf){
						this.addFoot('首页-'+this.titleInfo.title+'-列表-商品详情')
						
						this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
						this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
						this.addFoot('首页-'+this.titleInfo.title+'-列表')
					}
				}
			},
			// 足迹
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			}
		},
		onUnload() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				if(this.is_home_jump){
					this.addFoot('首页-'+this.titleInfo.title+'-列表')
				}
			}
		},
		onHide() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				if(this.is_home_jump){
					this.addFoot('首页-'+this.titleInfo.title+'-列表')
				}
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.isLoading = true
				this.page++
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	.recommend-list{
		.recommend-list-box{
			padding: 0 30rpx;
			.recommend-tabs{
				margin: 0 -30rpx;
				border-bottom: solid 2rpx #F7F7F7;
			}
		}
		.recommend-item{
			background-color: #F7F7F7;
			margin: 0 -30rpx;
			padding: 0 30rpx;
			.product-items:last-child{
				border-bottom: none;
			}
		}
	}
</style>
